<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader
            :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('orders.quick Search Fields') })"
        ></TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef" >
            <!-- 请注意 #test 它是自定义的插槽名称 -->
            <template #test>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column prop="status" label="付款状态" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span
                                style="display: inline-block; width: 10px; height: 10px; border-radius: 50%"
                                :class="'status-' + scope.row.pay_status"
                            ></span>
                            <span style="margin-left: 10px">{{ scope.row.pay_status_text }}</span>
                        </div>
                    </template>
                </el-table-column>
            </template>
            <template #check_text>
                <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                <el-table-column prop="status" label="审核状态" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <span
                                style="display: inline-block; width: 10px; height: 10px; border-radius: 50%"
                                :class="'status-' + scope.row.check_status"
                            ></span>
                            <span style="margin-left: 10px">{{ scope.row.check_text }}</span>
                        </div>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <!-- 表单 -->
        <PopupForm />
        <check />
        <!-- <ViewHourse v-if="orderrow.house_type=='houses'"/>
        <ViewFindStore  v-if="orderrow.house_type=='findstore'"/> -->
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import ViewHourse from '../houses/info.vue'
import ViewFindStore from '../findstore/info.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import Check from './check.vue'
import { checkSumit } from '/@/api/backend/hourse'
import { ElMessageBox, ElNotification } from 'element-plus'
defineOptions({
    name: 'orders',
})
const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons([])

const orderrow = ref({
    house_type: '',
    hours_info: {},
})

const checkForm = reactive({
    check_mark: '',
    id: '',
    check_status: '',
    check_img: '',
})
/**
 * 示例核心代码(2/3)
 * 表格操作按钮组 optButtons 只是个普通的数组，此处向其 push 一个 OptButton
 */
 optButtons.push(
 {
        render: 'tipButton',
        name: 'success', // name 是任意的
        title: '', // title 是语言翻译 key
        text: '支付',
        type: 'success',
        icon: 'success',
        // 按钮是否显示，请返回布尔值
        display: (row: TableRow, field: TableColumn) => {
            return true
        },
        disabled: (row: TableRow, field: TableColumn) => {
            return (row.check_status==1||row.check_status==3)?false:true
        },
        click(row, field) {
            baTable.form.extend!.infoLoading = true
            let checkItem=Object.assign({},row);      
            checkItem.check_status=2;
            console.log(row,'行')
            //setTimeout(() => {
                baTable.table.extend!.infoData = checkItem
                baTable.form.extend!.infoLoading = false
           //}, 200)
            baTable.form.operate! = 'checkaction'
            return true
        },
    },
    {
        render: 'tipButton',
        name: 'info', // name 是任意的
        title: '', // title 是语言翻译 key
        text: '驳回',
        type: 'info',
        icon: '',
        // 按钮是否显示，请返回布尔值
        display: (row: TableRow, field: TableColumn) => {
            return true
        },
        disabled: (row: TableRow, field: TableColumn) => {
            return (row.check_status==1||row.check_status==3)?false:true
        },
        click(row, field) {
            // 您也可以使用 baTable.form.operate，默认情况它有三个值`Add、Edit、空字符串`，前两个值将显示添加和编辑弹窗
            // 您也可以再来个 loading 态，然后请求详情数据等
            baTable.form.extend!.infoLoading = true
            let checkItem=Object.assign({},row);      
            checkItem.check_status=3;
            console.log(row,'行')
            //setTimeout(() => {
                baTable.table.extend!.infoData = checkItem
                baTable.form.extend!.infoLoading = false
           //}, 200)
            baTable.form.operate! = 'checkaction'
            return true
        },
    },
)
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/Orders/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('orders.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            {
                label: t('orders.user__username'),
                prop: 'user.username',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                render: 'tags',
                width: 120,
                operator: 'LIKE',
            },
            {
                label: t('相关资讯'),
                prop: 'hours_info.name',
                render: 'customTemplate',
                width: 150,
                operator: false,
                customTemplate: (row: TableRow, field: TableColumn, value: any) => {
                    return '<span style="cursor: pointer">' + value + '</span>'
                },
            },
            // {
            //     label: t('orders.create_time'),
            //     prop: 'create_time',
            //     align: 'center',
            //     render: 'datetime',
            //     operator: false,
            //     sortable: 'custom',
            //     width: 160,
            //     timeFormat: 'yyyy-mm-dd hh:MM:ss',
            // },
            // { label: t('orders.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            {
                label: t('orders.paid_time'),
                prop: 'paid_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss',
            },
            {
                label: t('orders.order_no'),
                prop: 'order_no',
                align: 'center',

                width: 180,
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            {
                label: t('orders.transaction_id'),
                prop: 'transaction_id',
                align: 'center',
                width: 200,
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            {
                label: t('orders.open_bank'),
                prop: 'open_bank',
                align: 'center',

                width: 200,
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            {
                label: t('orders.truename'),
                prop: 'truename',
                align: 'center',

                width: 120,
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            {
                label: t('orders.bankno'),
                prop: 'bankno',
                align: 'center',
                width: 200,
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            { label: t('orders.order_amount'), width: 120, prop: 'order_amount', align: 'center', operator: 'RANGE', sortable: false },
            // {
            //     label: t('orders.pay_status'),
            //     prop: 'pay_status',
            //     align: 'center',
            //     render: 'tag',
            //     operator: 'FIND_IN_SET',
            //     sortable: false,
            //     replaceValue: { '0': t('orders.pay_status 0'), '1': t('orders.pay_status 1'), '2': t('orders.pay_status 2'),'3':'佣金已支付' },
            //     show: false,
            // },
            // 显示用
            { label: t('orders.check_status'),width: 120, render: 'slot', slotName: 'check_text', operator: false, visible: false },
            // 搜索用
            {
                label: t('orders.check_status'),
                prop: 'check_status',
                align: 'center',
                render: 'tag',width: 120,
                operator: '=',
                sortable: false,
                replaceValue: { '0': t('orders.check_status 0'), '1': t('orders.check_status 1'), '2': t('orders.check_status 2'), '3': t('orders.check_status 2') },
                show: false,
            },

            { label: t('转账截图'),width: 120, prop: 'check_img', align: 'center', render: 'image', operator: false },
            {
                label: t('驳回原因'),width: 120,
                prop: 'check_msg',
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'),
                operator: 'LIKE',
                sortable: false,
            },
            {
                label: t('orders.check_time'),
                prop: 'check_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss',
            },
             { label: t('Operate'), align: 'center',fixed: 'right', width: 200, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: ['all']
    },
    {
        defaultItems: { paid_time: null, order_amount: 0, pay_status: '1' },
    }
)
const onCellClick = (row: TableRow, column: TableColumn, cell: HTMLElement, event: PointerEvent) => {
    console.log('参数', row.house_type, column, cell, event)
    baTable.table.extend!.showInfo = true
    // 您也可以使用 baTable.form.operate，默认情况它有三个值`Add、Edit、空字符串`，前两个值将显示添加和编辑弹窗
    // 您也可以再来个 loading 态，然后请求详情数据等
    baTable.table.extend!.infoLoading = true
    baTable.table.extend!.infoData = row
    setTimeout(() => {
        baTable.table.extend!.infoLoading = false
    }, 200)
    orderrow.value = row
}
provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    //baTable.table.filter!.search = [{field:'pay_status',val:'1,2,3',operator:'FIND_IN_SET',render:'tags'}]
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">
.status-0 {
    background-color: yellow; //已下架
}
.status-1 {
    background-color: green; //已经上架
}
.status-2 {
    background-color: red; //待审核
}
.status-3 {
    background-color: #ec4d4f; //已驳回
}
</style>
